<template>
  <div class="api-management-detail">
    <div class="header-bar">
      <Button shape="circle" icon="md-arrow-back" @click="goBack"></Button>
      <Tooltip :content="detailInfo.apiPath || detailInfo.path" transfer placement="top" transfer-class-name="tooltip-apiPath">
        <div class="title">{{ detailInfo.apiPath || detailInfo.path }}</div>
      </Tooltip>
      <div class="line"></div>
      <div class="self-adaption">
        <ul class="tabs-box">
          <li
            v-for="item in tabList"
            :key="item.value"
            :class="{ 'is-active': activeName === item.value }"
            @click="tabChange(item.value)"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
    </div>
    <template>
      <Limit v-if="activeName == '1'" :appInfo="detailInfo"> </Limit>
      <Fusing v-if="activeName == '2'" :appInfo="detailInfo"> </Fusing>
      <Monitor v-if="activeName == '3'" :appInfo="detailInfo"> </Monitor>
      <History v-if="activeName == '4'" :detailInfo="detailInfo"> </History>
    </template>
  </div>
</template>
<script>
import Fusing from './tabs/fusing.vue'
import History from './tabs/history.vue'
import Limit from './tabs/limit.vue'
import Monitor from './tabs/monitor.vue'

export default {
  components: { Limit, Fusing, Monitor, History },
  name: 'apiManagementDetail',
  props: {},
  data() {
    return {
      tabList: [
        {
          value: '1',
          label: this.$t('module.apiManage.APILimiting')
        },
        {
          value: '2',
          label: this.$t('module.apiManage.APIBlown')
        },
        {
          value: '3',
          label: this.$t('module.apiManage.monitor')
        },
        {
          value: '4',
          label: this.$t('module.apiManage.history')
        }
      ],
      activeName: '1',
      detailInfo: {}
    }
  },
  created() {
    if (this.$route.query && this.$route.query.detailInfo) {
      this.detailInfo = JSON.parse(this.$route.query.detailInfo)
      console.log(this.detailInfo)
      if (this.detailInfo.apiPath) {
        //api进入
        this.detailInfo.resource = this.detailInfo.apiPath
        this.detailInfo.resourceType = 1
      } else {
        //分组进入
        this.detailInfo.resource = this.detailInfo.path
        this.detailInfo.resourceType = 0
      }
    }
  },
  methods: {
    tabChange(name) {
      this.activeName = name
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less">
.single-page {
  &:has(.api-management-detail) {
    padding: 0 10px;
    height: calc(((100vh - 46px) - 20px) - 60px)
  }
}
.ivu-tooltip-popper{
  &.tooltip-apiPath{
    .ivu-tooltip-inner{
      overflow: hidden;
      word-break: break-all;
      white-space: initial;
      
    }
  }
}
</style>
<style lang="less" scoped>
.api-management-detail {
  padding: 0 10px;
  .header-bar {
    display: flex;
    align-items: center;
    height: 56px;
    padding-left: 10px;
    border-bottom: 1px solid #e2e4ea;
    margin-bottom: 20px;
    .ivu-btn-circle {
      width: 24px;
      height: 24px;
      font-size: 14px;
      margin-right: 14px;
      color: var(--primary-color);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
      border: none;
    }
    .ivu-tooltip{
      display: flex;
    }
    .title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #12151b;
      letter-spacing: 0;
      font-weight: 500;
      max-width: 320px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .line {
      width: 1px;
      height: 20px;
      background-color: #e2e4ea;
      margin: 0 20px;
    }
    .self-adaption {
      overflow: hidden;
      padding: 8px 0;
      &:hover {
        overflow-x: auto;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #c5cad5;
      }
      &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
    }
    .tabs-box {
      display: flex;
      width: 415px;
      li {
        position: relative;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #858b9c;
        letter-spacing: 0;
        font-weight: 400;
        padding: 0 10px;
        margin: 0 10px;
        cursor: pointer;
        &.is-active {
          color: #111a34;
          font-weight: 500;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 2px;
            background: var(--primary-color);
          }
        }
      }
    }
  }
}
</style>
